import React, {useState} from 'react'
import {Button, Icon} from 'antd'

export default ({id, name, answer, onWrong, onFinish}) => {
  const [iconType, setIconType] = useState('meh')
  const onClick = () => {
    if(id !== answer) {
      setIconType('frown')
      onWrong()
    } else {
      setIconType('smile')
      onFinish()
    }
  }
  return (
    <div style={{margin: 5}}>
      <Button shape="round"
              disabled={iconType !== 'meh'}
              onClick={onClick}>
        <Icon type={iconType} theme="twoTone"/>
        {name}
      </Button>
    </div>
  )
}
